<!-- 商家销量统计横向柱状图 -->
<template>
    <div class="com-container">
        <!-- 显示图表 -->
        <div class="com-chart" ref="seller_ref">

        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
            return {
                //接收echarts init对象
                chartInstance:null,
                allData:null,
                currentPage:1, //当前显示的页数
                totalPage : 0 ,//总页数
                timeId:null  //定时器的标识
            }
        },
        created(){
        //回调函数的注册
        this.$socket.registerCallBack('sellerData',this.getData)
        },
        mounted() {
            this.initChart()
            // this.getData()
            //获取数据 发送数据给服务器
            this.$socket.send({
                action:'getData',
                socketType:'sellerData',
                chartName:'seller',
                value:''
            })
            //监听页面大小自适应
            window.addEventListener('resize',this.screenAdapter)
            this.screenAdapter()
        },
        //生命周期销毁 取消定时器
        destroyed(){
            clearInterval(this.timeId)
            //组件销毁取消监听器
            window.removeEventListener('resize', this.screenAdapter)
            //回调函数的取消
            this.$socket.unRegisterCallBack("sellerData")
        },
        methods: {
            //初始化echartsInstance对象
            initChart(){                
                this.chartInstance = this.$echarts.init(this.$refs.seller_ref,this.theme)
                console.log(this.chartInstance);
                //配置初始化Option
                const initOption = {
                    title:{
                        text:'▎商家销售量统计',
                        left:20,
                        top:20
                    },
                    //坐标轴
                    grid:{
                        top:'20%',
                        left:'3%',
                        right:'6%',
                        bottom:'3%',
                        //距离坐标轴的文字
                        containLabel:true
                    },
                    //横向柱状图
                    xAxis:{
                        //x为数值轴
                        type:'value'
                    },
                    yAxis:{
                        //y类目轴
                        type:'category',
                        
                    },
                    //鼠标选中时候触发
                    tooltip:{
                        trigger: 'axis',//坐标轴
                        axisPointer:{
                            type: 'line',
                            lineStyle: {
                                type:'solid',
                                color:'#2D3443',                                
                            },
                            z: 0,
                        }
                    },
                    series:[
                        {
                            type:'bar',
                            //柱状图形数据                                                      
                            label:{
                                //显示数据以及数据的配置
                                show:true,
                                position:'right',
                                textStyle:{
                                    color:'white',
                                }
                            },
                            itemStyle:{
                                //柱状图圆角 [左上 右上 右下 左下]
                                //颜色渐变
                                //x1, y1, x2, y2方向 左   []颜色值
                                color:new this.$echarts.graphic.LinearGradient(0, 0, 1, 0,[
                                    //百分之0 颜色起始值
                                    {
                                        offset:0,
                                        color:'#5052EE'
                                    },
                                    //颜色末尾
                                    {
                                        offset:1,
                                        color:'#AB6EE5'
                                    }
                                ])
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(initOption)

                //对图表对象 监听鼠标事件
                this.chartInstance.on('mouseover',()=>{
                    clearInterval(this.timeId)
                })
                this.chartInstance.on('mouseout',()=>{
                    this.startInterval()
                })
            },
            //获取服务器数据
            async getData(res){
                // /seller
                // const {data:res} = await this.$http.get('seller')
                console.log(res)
                this.allData = res
                //数据进行排序
                this.allData.sort((a,b)=>{
                    return a.value - b.value //从小到大    --从大到小b.value-a.value
                })
                //总页数计算
                this.totalPage = this.allData.length%5 == 0 ? this.allData.length/5 : this.allData.length/5+1
                this.updateChart()
                this.startInterval()
            },
            //更新图表
            updateChart(){
                const start = (this.currentPage-1)*5
                const end = (this.currentPage)*5
                const showData = this.allData.slice(start, end)
                const sellerNames = showData.map((item)=>{
                    return item.name
                })
                const sellerValue = showData.map((item)=>{
                    return item.value
                })
                //配置数据Option
                const dataOption = {                    
                    yAxis:{
                        //y类目轴 
                        data:sellerNames
                    },
                    //鼠标选中时候触发
                    series:[
                        {                       
                            //柱状图形数据
                            data:sellerValue,                           
                        }
                    ]
                }
                this.chartInstance.setOption(dataOption)
            },
            startInterval(){
                if(this.timeId){
                    clearInterval(this.timeId)
                }
                this.timeId = setInterval(()=>{
                    this.currentPage++
                    if(this.currentPage>this.totalPage){
                        this.currentPage = 1
                    }
                    this.updateChart()
                },3000)
            },
            //浏览器大小变化调用 分辨率屏幕适配
            screenAdapter(){
                //当前的宽度
                const tittleFontSize = this.$refs.seller_ref.offsetWidth/100 * 3.6
                // console.log(tittleFontSize)
                //配置适配Option
                const adapterOption = {
                    title:{                       
                        textStyle:{
                            fontSize:tittleFontSize
                        },
                    },
                    //鼠标选中时候触发
                    tooltip:{                    
                        axisPointer:{                       
                            lineStyle: {
                                width:tittleFontSize,
                            },
                           
                        }
                    },
                    series:[
                        {                                                                               
                            barWidth:tittleFontSize,
                            itemStyle:{
                                //柱状图圆角 [左上 右上 右下 左下]
                                barBorderRadius:[0,tittleFontSize/2,tittleFontSize/2,0],
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(adapterOption)
                // 手动调用图表的 resize 才能产生效果
                this.chartInstance.resize()
            }
        },
        computed: {
            ...mapState(['theme'])
        },
        watch:{
            theme(){
                console.log('主题切换')
                // 销毁当前的图表
                this.chartInstance.dispose()
                this.initChart() //以最新的主题来初始化图表对象
                this.screenAdapter()// 屏幕适配
                this.updateChart()// 更新数据
            }
        }
}
</script>

<style lang="less" scoped>

</style>